<template>
  <div class="tab-info-container">
    <h3>{{tabItem.title}}</h3>
    <el-tabs v-if="tabList.length > 0" type="card" class="nav-tab" @input="tabClick" :value="selectValue">
      <el-tab-pane v-for="item in tabList" :key="item.id" :label="item.title" :name="item.id.toString()"></el-tab-pane>
    </el-tabs>
    <div class="feature-context">
      <div v-for="item in markDatas" :key="item.id" class="feature-item" @click.stop="featureChoose(item)">
        <div class="feature">
          {{item.title}}
        </div>
      </div>
    </div>
    <h3>图标样式</h3>
    <div class="image-context">
      <div class="image-container">
        <img class="image-item" :class="{'active':activeIcon.id == item.id}" v-for="item in selectTabIconList" :key="item.id" :src="getIconUrl(item)" :alt="item.icon" @click="changeActiveIcon(item)">

      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import env from '@/assets/env'
export default {
  data() {
    return {
      fileUrl: env.FILE_URL
    }
  },
  created() {
    // this.$store.dispatch('getMarkDatas').then(rst => {
    //   // console.log(rst)
    // })
  },
  computed: {
    ...mapGetters([
      'activeTab',
      'selectTabIconList',
      'activeIcon',
      'markDatas',
      'activeChildTab'
    ]),
    selectName() {
      return this.activeChildTab != null
        ? this.activeChildTab.id.toString()
        : null
    },
    tabItem() {
      if (this.activeTab == null) {
        return {
          id: 0,
          landmarkCatID: null,
          title: '暂无',
          pid: 0,
          description: '暂无',
          childs: []
        }
      } else {
        return this.activeTab
      }
    },
    tabList() {
      if (!this.tabItem.childs || this.tabItem.childs.length == 0) {
        return []
      } else {
        return this.tabItem.childs
      }
    },
    selectValue() {
      if (this.selectName == null && this.tabList.length > 0) {
        return this.tabList[0].id.toString()
      } else {
        return this.selectName
      }
    },
    featureItem() {
      if (this.tabList.length == 0) {
        return this.tabItem
      } else {
        return this.tabList.find(t => t.id == this.selectValue)
      }
    }
  },
  methods: {
    tabClick(value) {
      // this.selectName = value
      this.$store.commit('setActiveChildTabId', value)
    },
    featureChoose(item) {
      if (this.activeIcon && this.activeIcon.normal) {
        this.$store.commit('setActiveFeature', item)
      } else {
        this.$message.error('图标样式读取错误')
      }
    },
    changeActiveIcon(icon) {
      this.$store.commit('setActiveIcon', icon)
    },
    getIconUrl(icon) {
      // if (icon.id == this.activeIcon.id && icon.highlight) {
      //   return env.FILE_URL + icon.highlight
      // } else {
      return env.FILE_URL + icon.normal
      // }
    }
  },
  watch: {
    featureItem(val) {
      // console.log(val)
      // this.$store.dispatch('getFeatures', {
      //   landmarkCatID: val.landmarkCatID
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-info-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  h3 {
    margin-top: 0px;
    flex-shrink: 0;
  }
  .nav-tab {
    flex-shrink: 0;
  }
  .feature-context {
    width: 100%;
    height: 100%;
    overflow: auto;
    .feature-item {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      .feature {
        width: 90%;
        height: 90%;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #000;
        cursor: pointer;
        &:hover {
          background-color: #cccccccc;
        }
      }
    }
  }
  .image-context {
    width: 100%;
    height: 200px;
    flex-shrink: 0;
    overflow: auto;
    .image-container {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      align-items: center;
      justify-content: space-around;
      .image-item {
        margin-left: 10px;
        padding: 10px;
        height: 50px;
        border: 1px solid transparent;
        box-sizing: border-box;
        &.active {
          border: 1px solid orange;
        }
      }
    }
  }
}
</style>
